﻿<UserControl x:Class="Mantin.Controls.Wpf.Notification.NotificationCenter"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             Height="30" Width="350"
             Background="Transparent"
             d:DesignHeight="0" d:DesignWidth="0">
    <UserControl.Resources>
        <Style x:Key="ImageAnimation">
            <Style.Triggers>
                <EventTrigger RoutedEvent="Image.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="(Image.Opacity)" BeginTime="0:0:0" Duration="0:0:1" 
                                             From="1.0" To="0.0" RepeatBehavior="Forever" AutoReverse="True" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </UserControl.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="0" x:Name="RowDetails"/>
        </Grid.RowDefinitions>
        <Border CornerRadius="15" Height="28" Width="350" BorderThickness="1" BorderBrush="Gray" Grid.Row="0">
            <Border.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FFFDFDFD"/>
                    <GradientStop Color="#FF989797" Offset="1"/>
                </LinearGradientBrush>
            </Border.Background>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Grid.Resources>
                    <Style TargetType="Button">
                        <Setter Property="Width" Value="24"/>
                        <Setter Property="Height" Value="24"/>
                        <Setter Property="BorderBrush" Value="{x:Null}"/>
                        <Setter Property="Background" Value="Transparent"/>
                        <Setter Property="Cursor" Value="Hand"/>
                    </Style>
                </Grid.Resources>
                <Image Source="Resources/information.png" 
                       x:Name="ImageNotifiication"
                       Margin="2,0,0,0" 
                       Height="24" 
                       Width="24" 
                       Grid.Column="0" 
                       Visibility="Hidden"
                       ToolTip="New Notifications"
                       Style="{StaticResource ImageAnimation}"
                       HorizontalAlignment="Left"/>
                <Button Grid.Column="1" Margin="0,0,0,0">
                    <StackPanel>
                        <Image Source="Resources/media_beginning.png"/>
                    </StackPanel>
                </Button>
                <Button Grid.Column="2" Margin="4,0,0,0">
                    <StackPanel>
                        <Image Source="Resources/media_rewind.png"/>
                    </StackPanel>
                </Button>
                    <Button Grid.Column="3" Margin="4,0,0,0">
                    <StackPanel>
                        <Image Source="Resources/media_fast_forward.png"/>
                    </StackPanel>
                </Button>
                    <Button Grid.Column="4" Margin="4,0,0,0">
                    <StackPanel>
                        <Image Source="Resources/media_end.png"/>
                    </StackPanel>
                </Button>
                <Button Grid.Column="5" HorizontalAlignment="Right" Margin="0,0,7,0">
                    <StackPanel>
                        <Image Source="Resources/navigate_down.png"/>
                    </StackPanel>
                </Button>
            </Grid>
        </Border>
        <Grid x:Name="GridDetails" Background="Blue" Height="0" Grid.Row="1"></Grid>
    </Grid>
</UserControl>
